;(function () {

    const template = `<div class="row placeholders">

                    <div v-for="(hobby,index) in hobbies"  :key="index"  class="col-xs-6 col-sm-3 placeholder">
                        <img src=""
                             width="200" height="200" class="img-responsive" alt="Generic placeholder thumbnail">
                        <h4>{{hobby}}</h4>
                        <span class="text-muted">
                       
                        <a href="#" @click="delete_hobby(index)"> 删除</a>
                        </span>
                    </div>
                  
                    
                </div>`;
    window.Dashboard = {
        template,
        data() {
            return {};
        },
        // 生命当前子组件接受父组件的属性
        props: ['hobbies'],
        methods: {
            delete_hobby(index) {
                // 触发父组件中的 delete_hobby 事件进行删除操作，自定义事件不需要 通过 props进行传递
                this.$emit('delete_hobby', index)
            }
        }
    }

})();
